import React, {memo} from 'react'
import {HashRouter, Outlet, useLocation} from 'react-router-dom';
import {Link} from 'react-router-dom'
import {connect} from 'react-redux'
import './bottom.css'
import {actionCreators} from '../../pages/Main/store';
import HeadNumIcon from '../../common/headNumIcon/HeadNumIcon'

import main from '../../assets/images/首页.png'
import mainFocus from '../../assets/images/首页-选中.png'
import classify from '../../assets/images/分类.png'
import classifyFocus from '../../assets/images/分类-选中.png'
import location from '../../assets/images/定位.png'
import locationFocus from '../../assets/images/定位-选中.png'
import shopping from '../../assets/images/购物车.png'
import shoppingFocus from '../../assets/images/购物车-选中.png'
import my from '../../assets/images/我的.png'
import myFocus from '../../assets/images/我的-选中.png'

const Bottom = (props) => {
  let {routes, index, selectGoods} = props;
  const {pathname} = useLocation()

  // 匹配不同路径，高亮对应图标
  const allPath = ['/home/main', '/home/classify', '/home/location', '/home/shopping', '/home/my']
  index = allPath.findIndex((value) => pathname === value)

  const {changeIndex} = props;

  const countAmount = () => {
    let subCount = 0
    selectGoods.map((item) => {
      subCount = subCount + item.count
    })
    return subCount
  }

  return (
    <>
      {/* <HashRouter>
        <WrapRoute />
      </HashRouter> */}

      <div className="Bottom-warrper">
        <div className="Bottom-warrper-warp" key="1" onClick={() => {
          changeIndex(0)
        }}>
          <Link to="/home/main" style={{textDecoration: "none"}}>
            <div className="icon">
              <img alt="" src={index === 0 ? mainFocus : main}/>
            </div>
            <div style={index === 0 ? {color: '#ff6600'} : {}} className="planet">首页</div>
          </Link>
        </div>

        <div className="Bottom-warrper-warp" key="2" onClick={() => {
          changeIndex(1)
        }}>
          <Link to='/home/classify' style={{textDecoration: "none"}}>
            <div className="icon">
              <img alt="" src={index === 1 ? classifyFocus : classify}/>
            </div>
            <div className="planet" style={index === 1 ? {color: "#ff6600"} : {}}>分类</div>
          </Link>
        </div>

        <div className="Bottom-warrper-warp" key="3" onClick={() => {
          changeIndex(2)
        }}>
          <Link to='/home/location' style={{textDecoration: "none"}}>
            <div className="icon">
              <img alt="" src={index === 2 ? locationFocus : location}/>
            </div>
            <div className="planet" style={index === 2 ? {color: "#ff6600"} : {}}>定位</div>
          </Link>
        </div>

        <div className="Bottom-warrper-warp" key="4" onClick={() => {
          changeIndex(3)
        }}>
          <Link to='/home/shopping' style={{textDecoration: "none"}}>
            <div className="icon">
              <img alt="" src={index === 3 ? shoppingFocus : shopping}/>
            </div>
            <div className="planet" style={index === 3 ? {color: "#ff6600"} : {}}>
              购物车
              <HeadNumIcon top="0vh" left="70vw" num={countAmount()}/>
            </div>
          </Link>
        </div>

        <div className="Bottom-warrper-warp" key="5" onClick={() => {
          changeIndex(4);
        }}>
          <Link to='/home/my' style={{textDecoration: "none"}}>
            <div className="icon">
              <img alt="" src={index === 4 ? myFocus : my}/>
            </div>
            <div className="planet" style={index === 4 ? {color: "#ff6600"} : {}}>我的</div>
          </Link>
        </div>
      </div>
      <Outlet/>
    </>
  )
}

const mapStateToProps = (state) => {
  return {
    index: state.main.index,
    selectGoods: state.shopping.selectGoods
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    changeIndex(index) {
      dispatch(actionCreators.changeIndex(index))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(memo(Bottom))
